<template>
	<view class="page">
		<view class="da-center flex-column py-4 bg-white rounded shadow" v-if="pubilcSiteList.length === 0">
			<view class="font-md text-dark">您暂未提交任何服务！！！</view>
			<view class="mt-4 border border-warning rounded-6 px-3" @tap="goproperty" hover-class="bg-light-secondary">有需要去提交</view>
		</view>
		
		<view class="d-flex j-sb" v-else>
			<view class="da-center" @tap="showSelect('sortShow')">
				<text class="mr">{{ sortVal ? sortVal.label : '默认排序' }}</text>
				<u-icon name="arrow-down-fill" color="#8A8A8A" size="14"></u-icon>
			</view>
			<view class="da-center" @tap="showSelect('pickShow')">
				<text class="mr">{{ pickVal ? pickVal.label : '全部' }}</text>
				<u-icon name="arrow-down-fill" color="#8A8A8A" size="14"></u-icon>
			</view>
		</view>
		
		<view class="pb-2 mt-2">
			<block v-for="(item, i) in pubilcSiteList" :key="i">
				<pubilcSiteItem :itemdata="item" :index="i" />
			</block>
		</view>
		
		
		<u-select v-model="sortShow" :list="sort" @confirm="sortConfirm"></u-select>
		<u-select v-model="pickShow" :list="pickList" @confirm="pickConfirm"></u-select>
	</view>
</template>

<script>
	import pubilcSiteItem from '@/components/publicServe/pubilc_site_item.vue';
	
	import { publicSiteList } from '@/api/property/property.js'
	export default {
		components: {
			pubilcSiteItem
		},
		data() {
			return {
				sortShow: false,
				pickShow: false,
				sortVal: null,
				pickVal: null,
				sort: [{ label: '默认排序', value: 0 }, { label: '按申请时间排序', value: 1 }, { label: '按审核时间排序', value: 2 }],
				pickList: [{ label: '全部', value: 0 }, { label: '待处理', value: 1 }, { label: '已处理', value: 2 }],
				pubilcSiteList:[],
			}
		},
		onReady() {
			this.getPunlicSiteList()
		},
		methods: {
		 async	getPunlicSiteList(){
			 const {result:res} = await	publicSiteList()
			 this.pubilcSiteList = res
			},
			goproperty(){
				uni.navigateTo({
					url: '/pages/property/property'
				});
			},
			showSelect(key) {
				this[key] = true;
			},
			sortConfirm(e) {
				this.sortVal = e[0];
			},
			pickConfirm(e) {
				this.pickVal = e[0];
			},
		}
	}
</script>

<style scoped>
.page{
	width: 100%;
	height: 100%;
	background-color: #F4F3F8;
	padding: 20rpx;
}
</style>
